<%@ page contentType="text/html;charset=UTF-8" language="java" %>

<%@include file="head.jsp"%>

<form class="layui-form" id="test"> <!-- 提示：如果你不想用form，你可以换成div等任何一个普通元素 -->
    <div class="layui-form-item">
        <label class="layui-form-label">复选框</label>
        <div class="layui-input-block">
            <input type="checkbox" name="like" title="写作" lay-filter="auth">
            <input type="checkbox" name="like" title="阅读" lay-filter="auth">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">下拉选择框</label>
        <div class="layui-input-block">
            <select name="interest" lay-filter="aihao">
                <option value="0">写作</option>
                <option value="1">阅读</option>
            </select>
        </div>
    </div>


    <div class="layui-form-item">
        <div class="layui-input-block">
            <button class="layui-btn" lay-submit lay-filter="submit">立即提交</button>
            <button type="reset" class="layui-btn layui-btn-primary">重置</button>
        </div>
    </div>
</form>


<script type="application/javascript">
    var form = layui.form;

    init();

    function init(){
        form.render();

        form.on('checkbox(auth)', function(data){
            // console.log(data.elem); //得到checkbox原始DOM对象
            console.log(data.elem.checked); //是否被选中，true或者false
            console.log(data.value); //复选框value值，也可以通过data.elem.value得到
            // console.log(data.othis); //得到美化后的DOM对象
        });
        form.on('submit(submit)', function(data){
            // console.log(data.elem) //被执行事件的元素DOM对象，一般为button对象
            // console.log(data.form) //被执行提交的form对象，一般在存在form标签时才会返回
            console.log(data.field) //当前容器的全部表单字段，名值对形式：{name: value}

            var data = $("#test").serializeJson();

            console.log(data);

            return false; //阻止表单跳转。如果需要表单跳转，去掉这段即可。
        });
    }


    /**
     * 将form里面的内容序列化成json
     * 相同的checkbox用分号拼接起来
     * @param {dom} 指定的选择器
     * @param {obj} 需要拼接在后面的json对象
     * @method serializeJson
     * */
    $.fn.serializeJson=function(otherString){
        var serializeObj={},
            array=this.serializeArray();
        $(array).each(function(){
            if(serializeObj[this.name]){
                serializeObj[this.name]+=';'+this.value;
            }else{
                serializeObj[this.name]=this.value;
            }
        });

        if(otherString!=undefined){
            var otherArray = otherString.split(';');
            $(otherArray).each(function(){
                var otherSplitArray = this.split(':');
                serializeObj[otherSplitArray[0]]=otherSplitArray[1];
            });
        }
        return serializeObj;
    };

</script>

<%@include file="foot.jsp"%>